  <!-- tuopanrecordmgr托盘记录 -->
<template>
  <div class="index">
    <div class="index_form">
      <a-card
        :bordered="false"
        :body-style="{ 'padding-bottom': '0px' }"
        :style="{ margin: '6px', }"
      >
        <a-form
          ref="searchFormRef"
          name="advanced_search"
          :model="searchFormState"
          class="ant-advanced-search-form"
        >
          <a-row :gutter="24">
            <a-col :span="5">
              <a-form-item label="出厂编号" name="FacNo">
                <a-input
                  v-model:value="searchFormState.FacNo"
                  placeholder="请输入出厂编号"
                  @keyup.enter="tableRef.refresh(true)"
                />
              </a-form-item>
            </a-col>
            <a-col :span="9">
              <a-form-item label="更新时间" name="time">
                <a-range-picker
                  v-model:value="searchFormState.time"
                  :format="dayFormat"
                  showTime
                />
              </a-form-item>
            </a-col>

            <a-col :span="7">
              <a-form-item label="托盘标识" name="PrinterCode">
                <a-input
                  v-model:value="searchFormState.PrinterCode"
                  placeholder="请输入托盘标识"
                  @keyup.enter="tableRef.refresh(true)"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="5">
              <a-form-item label="托盘状态" name="Status">
                <a-select
                  v-model:value="searchFormState.Status"
                  style="width: 100%"
                  placeholder="请选择托盘状态"
                  :options="[
                    {
                      value: -1,
                      label: '全部',
                    },
                    {
                      value: 0,
                      label: '未打包',
                    },
                    {
                      value: 1,
                      label: '打包中',
                    },
                    {
                      value: 2,
                      label: '打包完成',
                    },
                  ]"
                ></a-select>
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item label="打印状态" name="HasPrint">
                <a-select
                  v-model:value="searchFormState.HasPrint"
                  style="width: 100%"
                  placeholder="请选择打印状态"
                  :options="[
                    {
                      value: -1,
                      label: '全部',
                    },
                    {
                      value: 0,
                      label: '未打印',
                    },
                    {
                      value: 1,
                      label: '已打印',
                    },
                  ]"
                ></a-select>
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-button
                class="mr10"
                type="primary"
                @click="tableRef.refresh(true)"
                v-show="hasRole(route.meta.RolePower)">查询</a-button
              >
              <a-button class="xn-mg08" @click="reset" v-show="hasRole(route.meta.RolePower)">重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </a-card>
    </div>
    <div class="index_contnet">
      <a-card  :bordered="false" :style="{ margin: '0 6px 6px',height:'100%'}">
        <s-table
          ref="tableRef"
          :columns="columns"
          :data="loadData"
          :alert="options.alert.show"
          bordered
          :row-key="(record) => record.ID"
          :tool-config="toolConfig"
          :row-selection="options.rowSelection"
          :scroll="{ x: '1500px',y:440}"
        >
          <template #operator>
            <a-space>
              <a-button type="primary" @click="exportData" v-show="hasRole(route.meta.RolePower)">
                <template #icon><ToTopOutlined /></template>
                导出
              </a-button>
              
            </a-space>
          </template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'PrinterPackage'">
              {{ record.HasProductCnt === record.NeedProductCnt ? "是" : "否" }}
            </template>
            <template v-if="column.dataIndex === 'Printer'">
              {{ record.HasProductCnt }}/{{ record.NeedProductCnt }}
            </template>
            <template v-if="column.dataIndex === 'CreateTime'">
              {{ transitionTime(record.CreateTime) }}
            </template>
            <template v-if="column.dataIndex === 'UpdateTime'">
              {{ transitionTime(record.UpdateTime) }}
            </template>
          </template>
        </s-table>
      </a-card>
    </div>
  </div>
</template>
        
    <script setup name="tuopanrecordmgr">
import tuopanrecordmgrApi from "@/api/productManagement/tuopanrecordmgrApi";
import { cloneDeep } from "lodash-es";
import { message } from "ant-design-vue";

import {
  transitionTime,
  getPreviousMonthDateTime,
  getCurrentDateTime,
} from "@/utils/time.js";
import { ref, onMounted } from "vue";
import dayjs from "dayjs";
import { useRoute } from "vue-router";
const route = useRoute();
const dayFormat = "YYYY/MM/DD HH:mm:ss";

const searchFormState = ref({
  ID: 0,
  PrinterCode: "",
  StartTime: "",
  EndTime: "",
  FacNo: "",
  Status: -1,
  HasPrint: -1,
  time: [
    dayjs(getPreviousMonthDateTime(), dayFormat),
    dayjs(getCurrentDateTime(), dayFormat),
  ],
});
const formRef = ref();
const searchFormRef = ref();
const tableRef = ref();
const toolConfig = {
  refresh: true,
  height: true,
  columnSetting: false,
  striped: false,
};
const columns = [
  {
    title: "托盘标识",
    dataIndex: "PrinterCode",
    align: "center",
    fixed: "left",
  },
  {
    title: "创建时间",
    dataIndex: "CreateTime",
    align: "center",
  },
  {
    title: "更新时间",
    dataIndex: "UpdateTime",
    align: "center",
  },
  {
    title: "更新人",
    dataIndex: "UserName",
    align: "center",
  },
  {
    title: "起始出厂编码",
    dataIndex: "StartFacNo",
    align: "center",
  },
  {
    title: "结束出厂编码",
    dataIndex: "EndFacNo",
    align: "center",
  },
  {
    title: "是否完成打包",
    dataIndex: "PrinterPackage",
    align: "center",
  },
  {
    title: "打包进度",
    dataIndex: "Printer",
    align: "center",
  },
  {
    title: "打印次数",
    dataIndex: "PrinterStatus",
    align: "center",
  },
  /* {
    title: "托盘中需打包的产品数量",
    dataIndex: "NeedProductCnt",
    align: "center",
  },
  {
    title: "托盘中已打包的产品数量",
    dataIndex: "HasProductCnt",
    align: "center",
  },
  {
    title: "托盘中产品的出厂编码前缀",
    dataIndex: "FacNoPre",
    align: "center",
  },
  {
    title: "托盘中产品的出厂编码起始序号",
    dataIndex: "StartFacSerialNo",
    align: "center",
  },
  {
    title: "托盘中产品的出厂编码结束序号",
    dataIndex: "EndFacSerialNo",
    align: "center",
  }, */

  /*   {
    title: "打包更新人ID",
    dataIndex: "UserID",
    align: "center",
  },
   */

  //   {
  //     title: "操作",
  //     dataIndex: "action",
  //     align: "center",
  //     width: "200px",
  //     fixed: "right",
  //   },
];
// 列表选择配置
const options = {
  alert: {
    show: false,
    clear: () => {},
  },
};
let searchAndExportFormParam = ref({});
const loadData = (parameter) => {
  const searchFormParam = cloneDeep(searchFormState.value);
  if (searchFormParam.time) {
    searchFormParam.StartTime = dayjs(searchFormParam.time[0]).format(
      dayFormat
    );
    searchFormParam.EndTime = dayjs(searchFormParam.time[1]).format(dayFormat);
  } else {
    searchFormParam.StartTime = getPreviousMonthDateTime();
  }
  delete searchFormParam.time;

  // 把查询条件保存到导出条件中
  searchAndExportFormParam.value = searchFormParam;
  return tuopanrecordmgrApi
    .getTuoPanPrinterRecords(Object.assign(parameter, searchFormParam))
    .then((res) => {
      return res.Data;
    });
};
// 重置
const reset = () => {
  searchFormRef.value.resetFields();
  tableRef.value.refresh(true);
};

const exportData = () => {
  const hide = message.loading("正在导出数据，请稍后...", 0);

  tuopanrecordmgrApi
    .exportOutTuoPanPrinterRecords(searchAndExportFormParam.value)
    .then((res) => {
      if (!res.Result) {
        hide()
        message.error("导出失败" + res.ResultMsg);
        return
      }
      hide()
      message.success("导出成功,即将开始下载");
      let a = document.createElement("a");
      let downUrl =
        import.meta.env.VITE_API_BASEURL + "/ExportFile/" + res.Data;
      if (downUrl.includes("/ntmgrwebws.asmx")) {
        downUrl = downUrl.replace("/ntmgrwebws.asmx", "");
      }
      a.href = downUrl;
      a.download = res.Data;
      a.click();
      a = null;
    }).catch(() => {
      hide();
      message.error("导出失败");
    });
};
</script>
<style lang="scss" scoped>
.index {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  height: 100%;
  & > div {
    width: 100%;
  }

  .index_contnet {
    flex: 1;
    overflow: hidden;
    padding-bottom: 10px;
  }
}
</style>